<script setup>
import PdfFileUploader from '@/components/file/PdfFileUploader.vue';
import FileCardGrid from '@/components/file/FileCardGrid.vue';
import { onMounted, ref } from 'vue';
import { delete_file, list_file_meta } from '@/api/file';
import { CODE } from '@/api/constants';
import { ElMessage } from 'element-plus';

const files = ref([])

const getFiles = async () => {
    const resp = await list_file_meta()
    if (resp.code !== CODE.OK) {
        ElMessage.error(resp.msg)
        return
    }
    files.value = resp.data.metas
}

const deleteFile = async (fileId) => {
    const resp = await delete_file({fileId})
    getFiles()
    if (resp.code !== CODE.OK) {
        ElMessage.error(resp.msg)
    } else {
        ElMessage.success("删除成功")
    }
}

onMounted(async () => {
    await getFiles()
})
</script>

<template>
    <div class="knowledge-container">
        <div class="file-uploader-layout">
            <PdfFileUploader @on-upload-success="getFiles"/>
        </div>

        <div class="card-grid-layout">
            <FileCardGrid :files="files" @delete-file="deleteFile" />
        </div>
    </div>
</template>

<style scoped>
.knowledge-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.file-uploader-layout {
    flex-shrink: 0;
}

.card-grid-layout {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    margin-top: 20px;
}
</style>